<template>
    <!-- 角色查询查询 -->
  <div>
      <!-- 查询区域 -->
      <el-form :inline="true" :model="queryForm" class="demo-form-inline" style="border:1px solid #DCDFE6;padding: 20px;">
        <el-form-item label="传感器ldid">
            <el-input v-model="queryForm.ldid" placeholder="请输入传感器ldid"></el-input>
        </el-form-item>
        <el-form-item label="传感器名称">
            <el-input v-model="queryForm.name" placeholder="请输入传感器名称"></el-input>
        </el-form-item>
        <el-form-item label="传感器类型">
            <el-select v-model="queryForm.tid" placeholder="请选择传感器类型" style="width:85%">
                    <el-option label="无" value=""></el-option>
                    <el-option
                    v-for="item in types"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
        </el-form-item>
        <el-form-item label="创建时间" >
            <el-col :span="18" >
                <el-date-picker 
                type="date" 
                placeholder="选择日期" 
                v-model="queryForm.createTime" 
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%;"></el-date-picker>
            </el-col>
        </el-form-item>

        <el-form-item >
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
       </el-form>
       <!-- 显示区域 -->
       <el-container style="border:1px solid #DCDFE6;padding: 10px;margin-top:10px">
           <el-table
            :data="datas"
            stripe
            style="width: 100%">
             <el-table-column
            type="index"
            width="80">
            </el-table-column>
            <el-table-column
            label="ldid"
            width="250">
            <template slot-scope="scope">
                <span >{{ scope.row.ldid }}</span>
            </template>
            </el-table-column>
            <el-table-column
            label="传感器名称"
            width="180">
            <template slot-scope="scope">
                 <span>{{scope.row.name}}</span>
            </template>
            </el-table-column>
             <el-table-column
            label="传感器类型"
            width="160">
            <template slot-scope="scope">
                 <span>{{scope.row.type}}</span>
            </template>
            </el-table-column>
             <el-table-column
            label="传感器描述"
            width="230">
            <template slot-scope="scope">
                 <span>{{scope.row.desc}}</span>
            </template>
            </el-table-column>
             <el-table-column
            label="创建时间"
            width="180">
            <template slot-scope="scope">
                 <span>{{scope.row.createTime}}</span>
            </template>
            </el-table-column>
            <el-table-column
            label="数据"
            width="60">
            <template slot-scope="scope">
                 <span>{{scope.row.data}}</span>
            </template>
            </el-table-column>
            <el-table-column
            label="单位"
            width="60">
            <template slot-scope="scope">
                 <span>{{scope.row.unit}}</span>
            </template>
            </el-table-column>
            
            <el-table-column label="操作"  width="80">
                <template slot="header">
                    操作
                </template>
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
       </el-container>
       <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.queryForm.current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="this.queryForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataSize">
        </el-pagination>
  </div>
</template>

<script>
import Qs from 'qs'
export default {
    data(){
        return{
            dataSize:400,// 数据总数
            queryForm:{
                ldid:"",
                name:"",
                tid:"",
                createTime:"",
                current:1,
                size:10
            },
            types:[{
                id:11,
                name:"温度传感器"
            }],
            datas:[],
        }
    },
    created(){
        this.onSubmit();
        this.getSensorTypes();
    },
    methods:{
        //提交查询
        async onSubmit() {
             const res = await this.$http.get("/sensorsenddata/listSeneorSendDatas",{params:this.queryForm})
             if(res.data.code == 200){
                 this.datas=res.data.data.records;
                 this.dataSize =res.data.data.total;
             }else{
                 this.$message.error(res.data.msg);
             }
        },
        // 删除按钮
        async handleDelete(index,row){
             row.visible = false;
            // 通过删除按钮根据id删除传感器数据
            const res = await this.$http.post("/sensorsenddata/deleteSensorSendData",Qs.stringify({id:row.id}))
            if(res.data.code === 200){
                this.$message({
                    message: res.data.msg,
                    type: 'success'
                });
                this.onSubmit();
            }else{
                this.$message.error(res.data.msg);
            }
        },
         // 每叶总数改变
        handleSizeChange(val) {
             this.queryForm.size  = val;
             this.onSubmit();
        },
        //当前页
        handleCurrentChange(val) {
            this.queryForm.current = val;
            this.onSubmit();
        },
          //获取传感器类型信息
        async getSensorTypes(){
            const res = await this.$http.get("/sensortype/getSensorTypes")
            this.types=res.data.data;
        }
        
    }
}
</script>

<style>
.line{
    widows: 20px;
}
</style>